<template>
    <div class="qilin-guide">
        <div class="header">联系</div>
        <div class="content primary">
            可以去<span class="link" @click="gotoGitee">Gitee</span>上联系作者
        </div>
        <div class="content primary flex-row" style="align-items:center;">
            扫码联系作者
            <el-image
                style="width:60px;height:60px;"
                :src="weChatImg"
                :preview-src-list="[weChatImg]"
                fit="contain"
            ></el-image>
        </div>
        <br>
        <div class="header">
            通过npm安装
        </div>
        <CodeMirror codeValue="npm install qilin-element3x"></CodeMirror>
        <br>
        <div class="header">注意</div>
        <div class="content warning">
            该组件库是基于vue3.x+element-plus开发，不兼容vue2.x，请注意使用！
        </div>
        <div class="content warning">
            该组件库是基于element-plus二次开发，所以须安装引入element-plus！
        </div>
        <div class="content warning">
            若您是用vue3中的setup语法糖形式开发的项目，则建议您将Qilin组件的配置项写在script内靠后的代码位置，防止配置项中引用您自定义方法时因顺序定义位置而报错~
        </div>
        <div class="content warning">
            因为该组件库是作者本人开发真实项目中所写，因为组件涉及到的业务案例有限，若您发现组件库并不能实现您的开发需求或者有bug存在，随时可以联系作者进行添加修改，共同学习进步~
        </div>
        <br>
        <div class="header">项目中使用配置</div>
        <CodeMirror codeValue="
            import {createApp} from 'vue';
            import App from './App.vue';
            const app = createApp(App);

            // 引入element-plus
            import ElementPlus from 'element-plus';
            import 'element-plus/dist/index.css';

            // 引入qilin-element3x
            import QilinElement from 'qilin-element3x';
            import 'qilin-element3x/style.css';

            app.use(ElementPlus).use(QilinElement).mount('#app');
        "></CodeMirror>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
const weChatImg=new URL("@/assets/images/wechat.jpg",import.meta.url).href;


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const gotoGitee=()=>{
    window.open("https://gitee.com/wang_zhenfei/qilin-element3x");
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
